<template>
  <div class="app-container">
    <div v-show="active === 1">
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="clauseName" label="条款名称">
              <el-input v-model="search.clauseName" placeholder="条款名称" clearable />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="clauseStatus" label="有效状态">
              <r-select
                v-model="search.clauseStatus"
                :formatter="filterCode"
                class="search-input"
                placeholder="请选择"
                type="1001"/>
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
            </el-button>
          </div>
        </el-form>
      </div>
      <!-- 表单表头信息 -->
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">订购协议维护</div>
          <el-button-group>
            <el-button type="primary" icon="el-icon-plus" @click="addClause()">新增</el-button>
          </el-button-group>
        </div>
        <BaseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
          <el-table-column type="index" label="序号" min-width="50"/>
          <el-table-column align="center" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" content="编辑" placement="bottom">
                <el-button
                  type="text"
                  style="font-size: 20px;"
                  icon="el-icon-edit-outline"
                  @click="editaddClause(scope.row)"/>
              </el-tooltip>
              <el-tooltip class="item" content="明细" placement="bottom">
                <el-button type="text" style="font-size: 20px;" icon="el-icon-document" @click="detail(scope.row)"/>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column v-if="false" prop="clause_id" label="clause_id"/>
          <el-table-column v-if="false" prop="clause_type" label="条款类型"/>
          <el-table-column prop="clause_name" label="条款名称"/>
          <el-table-column :formatter="filterCode" prop="clause_status" label="有效状态" />
        </BaseTable>
      </div>
    </div>
    <!-- 新增div -->
    <!-- 弹框 -->
    <el-dialog :title="clsuseTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="true" width="70%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" :disabled="!bols" label-width="90px">
        <el-row :gutter="6">
          <el-col v-if="false" :xs="24" :sm="8" :md="6">
            <el-form-item prop="clauseId" label="clauseId">
              <el-select v-model="form.clauseId" :clearable="true" placeholder="请选择" >
                <el-option v-for="item in clauseId" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="false" :xs="24" :sm="8" :md="6">
            <el-form-item prop="clauseType" label="条款类型">
              <el-select v-model="form.clauseType" :clearable="true" placeholder="请选择" >
                <el-option v-for="item in clauseType" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="clauseName" label="条款名称">
              <el-input v-model="form.clauseName" placeholder="条款名称" clearable />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="clauseStatus" label="有效状态">
              <!-- <el-select v-model="form.clauseStatus" :clearable="true" placeholder="请选择" >
                <el-option v-for="item in clauseStatus" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
              </el-select> -->
              <r-select
                v-model="form.clauseStatus"
                :formatter="filterCode"
                class="search-input"
                placeholder="请选择"
                type="1001"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="clauseContent" label="条款内容" >
              <!-- <el-input v-model="form.clauseContent" type="textarea" placeholder="请输入内容" maxlength="30" show-word-limi /> -->
              <quill-editor ref="text" :disabled="dialogType == 'detail'" v-model="form.clauseContent" class="editor"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button v-show="saveBS" type="primary" @click="saveClause">保 存</el-button>
        <el-button @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
    <!-- //
    // -->
  </div>
</template>
<script>
import {
  getClauseList,
  addNewClause,
  editClause,
  selectById
} from '@/api/admin/system_settings/gms/orderClause'
// import {
//   getUserInfoById
// } from '@/api/admin/org/gms/employeeInfo'
import Pagination from '@/components/Pagination'
import BaseTable from '@/components/BaseTable'
import BaseTableNoPage from '@/components/BaseTable/BaseTableNoPage'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import filtercode from '@/components/Checkbox/filtercode'
import _ from 'lodash'
export default {
  name: 'AuthorizationManagement',
  components: {
    BaseTable,
    BaseTableNoPage,
    Pagination,
    rSelect,
    filtercode
  },
  mixins: [formMixins],
  data() {
    return {
      active: 1,
      dialogFormVisible: false,
      editorOption: {},
      bols: true,
      clsuseTitle: '',
      dialogType: '',
      saveBS: '',
      type: 0,
      search: {
        limit: 10,
        pageNum: 1,
        clauseType: 32211002,
        clauseName: '',
        clauseStatus: '',
        clauseContent: ''
      },
      // 订购协议
      clauseType: [{
        code: 32211001,
        name: '留资条款'
      },
      {
        code: 32211002,
        name: '订购协议'
      }],
      // // 状态
      // clauseStatus: [{
      //   code: 10011001,
      //   name: '有效'
      // },
      // {
      //   code: 10011002,
      //   name: '无效'
      // }],
      dialogVisible: false,
      rules: {
        // clauseType: [{
        //   required: true,
        //   message: '请选择条款类型',
        //   trigger: 'blur'
        // }],
        clauseStatus: [{
          required: true,
          message: '请选择订购条款状态',
          trigger: 'blur'
        }],
        clauseContent: [{
          required: true,
          message: '请输入条款内容',
          trigger: 'blur'
        }],
        clauseName: [{
          required: true,
          message: '请输入条款名称',
          trigger: 'blur'
        }]
      },
      form: {
        clauseId: '',
        clauseType: 32211002,
        clauseName: '',
        clauseContent: '',
        clauseStatus: ''
      }
    }
  },
  computed: {},
  watch: {
  },
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 取消弹窗
    cancel() {
      this.dialogFormVisible = false
    },
    // 明细
    async detail(data) {
      this.bols = false
      this.saveBS = false
      this.dialogType = 'detail'
      this.clsuseTitle = '订购协议明细'
      await selectById(data.clause_id)
        .then(res => {
          this.form.clauseId = res.clause_id
          this.form.clauseContent = res.clause_content
          this.form.clauseName = res.clause_name
          this.form.clauseStatus = res.clause_status
          this.form.clauseType = res.clause_type
        })
      this.dialogFormVisible = true
    },
    // 查询
    searchHandle() {
      const table = this.$refs['table']
      const search = _.extend(this.search)
      table.wait()
      getClauseList(search).then(res => {
        table.complete().filData(res)
      }).catch(err => {
        table.complete()
      })
    },
    // 增加页面弹框
    addClause() {
      this.resetForm('form')
      this.bols = true
      this.form.clauseType = 32211002
      this.form.clauseName = ''
      this.form.clauseStatus = ''
      this.form.clauseContent = ''
      this.saveBS = true
      this.dialogType = 'add'
      this.clsuseTitle = '增加订购协议'
      this.dialogFormVisible = true
    },
    // 编辑
    async editaddClause(data) {
      this.bols = true
      this.saveBS = true
      this.dialogType = 'edit'
      this.clsuseTitle = '编辑订购协议'
      await selectById(data.clause_id)
        .then(res => {
          this.form.clauseId = res.clause_id
          this.form.clauseContent = res.clause_content
          this.form.clauseName = res.clause_name
          this.form.clauseStatus = res.clause_status
          this.form.clauseType = res.clause_type
        })
      this.dialogFormVisible = true
    },
    // 增加和编辑
    saveClause() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const params = {
            isDealer: this.dialogType,
            clauseId: this.form.clauseId,
            clauseType: this.form.clauseType,
            clauseName: this.form.clauseName,
            clauseStatus: this.form.clauseStatus,
            clauseContent: this.form.clauseContent
          }
          if (this.dialogType === 'add') {
            addNewClause(params).then(res => {
              this.$message({
                type: 'success',
                message: '订购协议新增成功!'
              })
              this.cancel()
              this.dialogFormVisible = false
              this.searchHandle()
            }).catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.errorMsg
              })
            })
          }
          if (this.dialogType === 'edit') {
            editClause(params, this.form.EMP_ID).then(res => {
              this.$message({
                type: 'success',
                message: '订购协议编辑成功!'
              })
              this.cancel()
              this.dialogFormVisible = false
              this.searchHandle()
            }).catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.errorMsg
              })
            })
          }
        }
      })
    }
  }
}

</script>

<style scoped>
.content{
  overflow-y: auto;
  overflow-x: auto
}
.editor {
    height: 400px;
    width: 900px;
  }
</style>
